[レポート]「MTDDC MEETUP HOKKAIDO 2018」に参加してきました〜ころばぬ先のテクニカルディレクション〜

2018年6月9日（土）に札幌で開催された「MTDDC MEETUP HOKKAIDO 2018」のセッション「ころばぬ先のテクニカルディレクション」についてレポートします。

セッション概要

概要

最近のWebサイト制作は、仕様は複雑になり関係者は増加しプロジェクトとしての難易度が年々あがってきています。
こういった状況では現場のエンジニアやデザイナーも早い段階で上流に入り込み、無理な要件を軌道修正してトラブルを防ぐことが求められています。
本セッションはフロントエンドの会社であるトゥーアールが行っているテクニカルディレクションのテクニックについて解説を行います。

スピーカー

株式会社トゥーアール / 代表取締役・フロントエンドエンジニア 西畑 一馬氏
1979年大阪生まれ、2002年からWeb制作を初めシステム会社や事業会社、Web制作会社などを経て2016年2月にフロントエンド専門のWeb制作会社トゥーアールを設立。
現在はAngularやVue.js、Reactといったフレームワークを利用したSPA開発から大規模サイトのHTML/CSS設計、インタラクティブコンテンツの開発などの業務を行っている。
「Web制作の現場で使うjQueryデザイン入門」や「JavaScriptコーディング ベストプラクティス」など多数の著書を執筆している。

セッションレポート

炎上の定義

個人によって違うであろうが今回はこれで定義する。
• 当初の予定通り進まない
• 超過稼働でリカバリー

予定通り進まない

• 仕様が予定したスケジュールで決まっていない
• 素材が予定したスケジュールで入手できていない
• デザインが予定したスケジュールでFIXできていない
• 仕様・要件が途中で変わる
• 実装時に仕様の想定漏れが判明
• スケジュールが遅延しているにもかかわらず納期は固定
• そもそも納期から逆算したスケジュールなので無理がある
• 上流（納期まで余裕がある作業）ほどスケジュールにルーズ

どうすれば予定通りに進むのか？

プロジェクトは予定通りに進まないものである。予定通りに進まなくなってから頑張っても遅い。
プロジェクトには不確定要素が多いが、どうすれば良いのか。
予定通りに進まなくなったとき、誰かが軌道修正しなくてはいけない。

実装者がディレクションする

上流工程ではビジネス要件からUI要件が生み出されて下流においてシステム要件になる。
制作に集中したい！
そのために実装者がディレクションする必要がある。

テクニカルディレクション

定義
• 技術的側面からプロジェクトを成功に導く
• 実装者が円滑に作業ができるようにするための下準備

スムーズじゃないかもしれない情報伝達の流れ

実装者⇄ディレクター⇄クライアント

スムーズかもしれない情報伝達の流れ

実装者⇄クライアント

直接コミュニケーションできる距離感が重要である。

テクニカルディレクションのポイント1

実装要件をはっきり決める

実装要件についての例
• 対応ブラウザは？
• Git使う？メールで納品？
• テストサーバーはどうするの？
• デザインソフトは？PS？AI？Sketch？
• SVG書き出せる？
• RWD？アダプティブデザイン？
• ブレークポイントは？
• SP版は何pxで作る？
• Gulp使って良い？Webpack？Parcel？
• Sass使って良い？PostCSSは？
• Babelを使う？TypeScriptを使う？
• jQueryにする？Vue.js？React？Angular？
• EditorConfigは？Linterは？formatterは？

テクニカルディレクションのポイント2

事前に要件を把握して破綻がないか確認

事前確認事項
• データの整合性は取れているか？
• 要件的に曖昧な箇所はないか？
• 無茶な要件が記載されていないか？

テクニカルディレクションのポイント3

技術的に怪しい箇所を事前に伝える

テクニカルディレクションのポイント4

きちんと工数を見積もる・伝える

見積のポイント
• 前提条件を明示
• 前提条件が外れた際のこともコミュニケーション
• なるべく細かく機能ごとに見積る
• ビジネス要件とシステム要件のミスマッチがわかるように
• ある程度のバッファを組み込んでおく
• 要件が膨れたら追加工数（お金・時間）を要求

テクニカルディレクションのポイント5

アラートは1秒でも早く行う

アラートのポイント
• 不測の事態の可能性に気づいたら即アラート
  発生しても心構えができている
  発生しないだけで幸せになれる

• 予定通り納品されるか何回か確認しておく

テクニカルディレクションのポイント6

チャットツールやチケット管理ツールを使い、手軽にコミュニケーションできるようにしておく

まとめ

プロジェクトには様々な形があり様々なメンバーが存在する。
適材適所の人員配置が求められる。
実装者がディレクションに関わるのも良い。

感想

このセッションは基本的にエンジニア向けとなっていましたので、エンジニアではない私にとっては難しく、わからない部分がありました。しかし、エンジニアではなくても普段仕事をする上で参考になる部分もあり、スムーズに仕事をができるように気をつけていきたいと思いました。